<!DOCTYPE html>
<!--文件类型-->

<html>

<head>
    <!-- Standard Meta -->
    <meta charset="UTF-8">

    <!--网页标题（显示在浏览器标题栏中改网页的标签页）-->
    <title> BitBitcode个人主页(^_^) </title>
    <!--标题栏图标-->
    <link rel="icon" href="images\Logo.png" type="image/x-icon">
    <!--收藏夹图标-->
    <link rel="shortcut icon" href="images\Logo.png" type="image/x-icon">


    <!--调用 CSS 样式文件-->
    <link href="CSS_files\semantic.css" rel="stylesheet" type="text/css">
    <link href="CSS_files\homepage.css" rel="stylesheet" type="text/css">


    <!--调用 JavaScript 文件-->
    <!--注意：“jquery-3.1.1.js”和“semantic.js”的调用顺序不能变！！！-->
    <script src="JavaScript_files\jquery-3.1.1.js"> </script>
    <script src="JavaScript_files\semantic.js"> </script>

    <!--含有JavaScript效果组件还需要单独调用-->
    <script>
        $(document)
            .ready(function () {
                $('.ui.menu .ui.dropdown')
                    .dropdown({
                        on: 'hover'
                    });
                $('.ui.menu a.item')
                    .on('click', function () {
                        $(this)
                            .addClass('active')
                            .siblings()
                            .removeClass('active')
                            ;
                    })
                    ;
            })
            ;

    </script>


    <!--内部样式定义-->
    <style>
        body {
            padding: 0em;
        }

        .ui.menu {
            margin: 3em 0em;
            border-style: solid;
            border-width: 2px;
            /*设置菜单栏两边的距离，类似居中的效果*/
            padding-right: 10%;
            padding-left: 10%;
        }

        .ui.menu:last-child {
            margin-bottom: 110px;
        }
    </style>

    <style type="text/css">
        body>.ui.container {
            margin-top: 3em;
        }

        iframe {
            border: none;
            width: calc(100% + 2em);
            margin: 0em -1em;
            height: 300px;
        }

        iframe html {
            overflow: hidden;
        }

        iframe body {
            padding: 0em;
        }

        .ui.container>h1 {
            font-size: 3em;
            text-align: center;
            font-weight: normal;
        }

        .ui.container>h2.dividing.header {
            font-size: 2em;
            font-weight: normal;
            margin: 4em 0em 3em;
        }

        .ui.table {
            table-layout: fixed;
        }
    </style>

    <!--适配手机屏幕-->
    <style>

    </style>
</head>

<body>
    <!--全页面背景-->
    <div class="background"> </div>


    <!--页眉与导航栏（开始）-->
    <div class="ui inverted grey fixed menu">
        <!--单项菜单-->
        <div class="header item">BitBitcode</div>
        <div class="active item">首 页</div>
        <a class="item" href="(0)Menu_Pages\(1)C_and_C++.html"> C/C++ </a>
        <a class="item" href="(0)Menu_Pages\(2)CMD.html"> CMD </a>
        <a class="item" href="(0)Menu_Pages\(3)Python.html"> Python </a>
        <a class="item" href="(0)Menu_Pages\(4)Articles.html"> 文 章 </a>

        <!--下拉菜单-->
        <div tabindex="0" class="ui dropdown item">
            更 多
            <i class="dropdown icon"></i>
            <div tabindex="-1" class="menu transition hidden">
                <a class="item" href="(5)Others\sentence.html"> 有趣的话 </a>
                <a class="item" href="(5)Others\lyric.html"> 歌词分享 </a>
                <a class="item" href="(5)Others\wallpaper.html"> 壁纸分享 </a>
                <div class="divider"></div>
                <a class="item" href="(0)Menu_Pages\(5)Others.html">其 他</a>
                <div class="divider"></div>
                <a class="item" href="README.md">关于本站</a>
            </div>
        </div>

        <!--右边搜索栏和链接-->
        <div class="right menu">
            <div class="item">
                <div class="ui transparent inverted icon input">
                    <input type="text" placeholder="搜索功能还未上线">
                    <button class="ui grey icon button"><i class="search icon"></i></button>
                </div>
            </div>
            <a class="item" href="http://github.com/BitBitcode"><i class="github icon"></i> 我的GitHub</a>
        </div>
    </div>
    <!--页眉与导航栏（结束）-->


    <!--开头部分（开始）-->
    <div id="start">
        <p id="headline">
            为世界上所有的美好而战
        </p>
        <p id="subword">
            梦想，再大也不嫌大，追梦的人，再小也不算小。<br>
        </p>

        <!--向下箭头-->
            <div style="
            text-align: center; 
            color: rgba(255,255,255,0.4);
            position: absolute; 
            width: 100%; 
            bottom: 10px">
                <a style="color:rgba(255,255,255,0.4)" href="#anchor"> <i class="huge angle double down icon"> </i> </a>
            </div>
    </div>

    <!--开头部分（结束）-->


    <!--正文部分（开始）-->
    <div class="MFD_Light_Navigation" id="anchor">
        <h1> 在这里，你可以做什么 </h1>
    </div>
    <div class="MFD_Light_Content">
        <!--正文部分（1）-->
        <div class="ui vertical stripe segment" style="padding-top: 10%; padding-bottom: 10%;">
            <div class="ui middle aligned stackable grid container">
                <div class="row">
                    <div class="six wide left floated column">
                        <img class="ui large bordered rounded image" src="images\chatu.jpg">
                    </div>
                    <div class="eight wide column">
                        <h2 class="ui header">这里有一些我的总结</h2>
                        <p>
                            对于从未接触过编程的人来说，看到密密麻麻的代码是一点兴趣都没有的<br>
                            而即使耐下心来努力学习，也还是会四处碰壁<br>
                            其实你遇到的很多问题，大家都遇到过并且解决了<br>
                            所以，去找一些分享经验的帖子就很有帮助<br>
                        </p>
                        <h2 class="ui header">也有一些与编程无关的分享</h2>
                        <p>
                            Yes, that's right.<br>
                            生活不止眼前的苟且，还有诗和远方！<br>
                            所以，除了编程，我还分享了一些自己喜欢的文章、歌词、图片等等<br>
                            <br>
                        </p>
                    </div>

                </div>
            </div>
        </div>


        <!--正文部分（2）-->
        <div class="ui vertical stripe segment" style="padding-top: 10%; padding-bottom: 10%;">
            <div class="ui text container">
                <!-- 1. -->
                <h2 class="ui header"> 庞大团队打造的丰富内容 </h2>
                <p>这里汇集了无数极富特色的经验分享与知识总结，那些书上没有的知识，或许值得你的注意。<br>
                    （其实团队只有一个人，内容也尚未添加。）
                </p>
                <h4 class="ui header">进一步了解：</h4>
                <a class="ui large red button" href="(0)Menu_Pages\(1)C_and_C++.html"> C/C++ </a>
                <a class="ui large black button" href="(0)Menu_Pages\(2)CMD.html"> CMD </a>
                <a class="ui large teal button" href="(0)Menu_Pages\(3)Python.html"> Python </a>
                <br>

                <!-- 2. -->
                <h4 class="ui horizontal header divider">
                    <a> 我是分割线 </a>
                </h4>
                <h2 class="ui header"> 精心筛选的娱乐内容 </h2>
                <p>或许你对编程不感兴趣，为什么不来看看娱乐内容。美文、歌词、壁纸，总有能打动你的瞬间。<br>
                    为何不点击下方的按钮开始尝试体验？
                </p>
                <a class="ui large blue button" href="(0)Menu_Pages\(4)Articles.html">我十分感兴趣</a>
                <br>

                <!-- 3. -->
                <h4 class="ui horizontal header divider">
                    <a> 我是分割线 </a>
                </h4>
                <h2 class="ui header"> 突破性的界面设计 </h2>
                <p>是的，我们用全新的思路来设计网页，以便给你带来更好的阅读体验。
                    清爽的配色、舒适的排版、精美的插图。。。借助Semantic UI™的强大组件，打造出色的博客网页。<br>
                    Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。
                </p>
                <a class="ui large blue button" href="https://semantic-ui.com/"> 尝试探索Semantic UI </a>
                <br>

                <!-- 4. -->
                <h4 class="ui horizontal header divider">
                    <a> 我是分割线 </a>
                </h4>
                <h2 class="ui header"> 对开发者的支持 </h2>
                <p>没错，我们的网页已经在GitHub上开源。<br>
                    如果你也对网页开发有兴趣，你可以随时查看HTML代码，下载项目。
                    同时，我们的开发面向所有感兴趣的人，欢迎提交你的更改。<br>
                    不知道Github是什么？GitHub是一个面向开源及私有软件项目的托管平台。
                </p>
                <a class="ui large blue button" href="https://github.com/"> 前往了解GitHub </a>
            </div>
        </div>

        <!--正文部分（3）-->
        <div class="ui vertical stripe quote segment" style="padding-top: 10%; padding-bottom: 10%;">
            <div class="ui equal width stackable internally celled grid">
                <div class="center aligned row">
                    <div class="column">
                        <h3>
                            "If you can't make it good, at least make it looks good."<br>
                        </h3>
                        <p>
                            <img class="ui avatar image" src="images\Bill Gates.jpg"> <b>比尔·盖茨（Bill
                                Gates）</b>微软（Microsoft）创始人
                        </p>
                    </div>
                    <div class="column">
                        <h3>
                            "Best or nothing."<br>
                        </h3>
                        <p>梅赛德斯-奔驰（Mercedes-Benz）广告语</p>
                    </div>
                </div>
            </div>
        </div>


        <!--消息栏-->
        <div class="ui info message">
            <div class="header"> 可能需要注意：网站仍在开发中。。。 </div>
            <ul class="list">
                <li> 首页已完成，你可以看到网站的基本框架 </li>
                <li> 一些高级功能仍在技术攻关，如搜索功能、过渡效果、交互内容等 </li>
                <li> 网页介绍仅供参考，目前内容非常有限，具体以实物为准 </li>
                <li> （“哦，我的上帝，如果你仍旧用这么蹩脚的翻译体和我说话，我保证会打烂你的头！”）</li>
            </ul>
        </div>
    </div>
    <!--正文部分（结束）-->


    <!--页脚部分（开始）-->
    <!--还可以借鉴GitHub的页脚：两边写字，中间有图标-->
    <div class="ui inverted grey vertical footer segment">
        <div class="ui container">
            <div class="ui stackable inverted divided equal height stackable grid">
                <div class="three wide column">
                    <h4 class="ui inverted header">关 于</h4>
                    <div class="ui inverted link list">
                        <a class="item" href="#">服务器支持：GitHub Pages</a>
                        <a class="item" href="https://semantic-ui.com/">样式支持：Semantic UI</a>
                        <a class="item" href="https://code.visualstudio.com/">开发软件：Visual Studio Code</a>
                        <a class="item" href="https://github.com/BitBitcode/BitBitcode.github.io">项目开源：GitHub</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">联系作者</h4>
                    <div class="ui inverted link list">
                        <a class="item">E-mail: smilewwc@qq.com</a>
                        <a class="item">Telephone：000000（示例）</a>
                        <a class="item">邮编：111111（示例）</a>
                        <a class="item">地址：中国-China</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header">版权信息</h4>
                    <p>
                        Semantic UI样式版权归原网站所有，请勿商用！<br>
                        Copyright ©2019~2020 BitBitcode.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--页脚部分（结束）-->
</body>

</html>